<template>
  <div class="toolSetUp">
    <div class="toolbar-right">
        <ul class="set-up">
          <li class="set-up-personal" @mouseover = "personInfo"  @mouseout = "personInfo2">
            <div class="imgBox">
              <img src="../../img/personal.png" alt="" class="backImage">
            </div>
            <ul class="el-submenu" v-show="subMenuPerson">
              <li @click="showPersonInfo">个人信息</li>
              <li @click="logout">退出</li>
            </ul>
          </li>
          <li class="name">
            <span>{{personalData.emName}}</span>
          </li>
        </ul>

    </div>
    <!--个人资料弹框-->
    <div class="mark-background" v-if="leave" @click="delPerson"></div>
    <div class="mark" v-if="leave">
      <div class="mark-content">
        <div class="mark-content-title">个人资料</div>
        <el-form :rules="rules" ref="personalData" label-position="right" label-width="85px" :model="personalData">
          <el-row>
            <el-col :span="12">
              <el-form-item label="登录账号" prop="account">
                <el-input disabled v-model="personalData.account"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12" style="position: relative;height: 1px">
                <el-upload
                  class="avatar-uploader"
                  :show-file-list="false"
                  :action="apiUrl+'/common/annex/?access_token='+token"
                  :on-success="handleAvatarSuccess"
                  name="file">
                  <img v-if="annexPic.url" :src="annexPic.url" class="avatar">
                  <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                </el-upload>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item label="所属机构" prop="orgName">
                <el-input disabled v-model="personalData.orgName"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item label="角色" prop="roleName">
                <el-input disabled v-model="personalData.roleName"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item label="真实姓名" prop="emName">
                <el-input v-model="personalData.emName" placeholder="请输入真实姓名"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item label="联系方式" prop="phone" class="phone">
                <el-input  v-model="personalData.phone" placeholder="请输入联系方式"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <p class="prompt">更改后，您的登录账号将是您更改后的联系方式</p>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <!--<el-form-item label="联系方式" prop="phone" class="phone">-->
                <!--<el-input  v-model="personalData.phone" placeholder="请输入联系方式"></el-input>-->
              <!--</el-form-item>-->
              <span @click="showPass" class="showPass">修改密码</span>
            </el-col>
          </el-row>
          <el-row v-show="isShowPass">
            <div class="panel-title">
              <el-row>
                <el-col>
                  <div class="grid-content bg-purple">密码信息</div>
                </el-col>
              </el-row>
            </div>
          </el-row>
          <el-row  v-if="isShowPass">
            <el-col :span="12">
              <el-form-item label="旧密码" prop="oldPassword">
                <el-input  type="password"  v-model="personalData.oldPassword" placeholder="请输入旧密码"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row  v-if="isShowPass">
            <el-col :span="12">
              <el-form-item label="新密码" prop="newPassword">
                <el-input  type="password"  v-model="personalData.newPassword" placeholder="请输入新密码"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="重复密码" prop="checkPass">
                <el-input  type="password"  v-model="personalData.checkPass" placeholder="请重复输入密码"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="delPerson">取 消</el-button>
          <el-button type="primary" @click="confirmPerson('personalData')">确 定</el-button>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  import {apiUrl} from '../../config/env';
  import staffApi from '../../service/corporation/staffApi';

  export default {
    data(){
      var validatePass = (rule, value, callback) => {
        if (value === '') {
          callback(new Error('请输入密码'));
        } else {
          if (this.personalData.checkPass !== '') {
            this.$refs.personalData.validateField('checkPass');
          }
          callback();
        }
      };
      var validatePass2 = (rule, value, callback) => {
        if (value === '') {
          callback(new Error('请再次输入密码'));
        } else if (value !== this.personalData.newPassword) {
          callback(new Error('两次输入密码不一致!'));
        } else {
          callback();
        }
      };
      return{
        leave:false,
        subMenuPerson:false,
        apiUrl,
        token:"",
        isShowPass:false,
        personalData: {
          "account": "",
          "emName": "",
          "phone": "",
          "orgName":  "",
          "roleName":  "",
          "oldPassword":"",
          "checkPass":"",
          "newPassword":""
        },
        annexPic:{
          "annexId": 0,
          "url": ""
        },
        queryData:{
          "annexId": null,
          "newPassword": "",
          "oldAnnexId": null,
          "oldPassword": "",
          "phone": "",
          "realName": "",
          "type": null,
          "userId": null
        },
        dialogTableVisible:true,
        rules: {
          emName: [
            {required: true, message: '请输入真实姓名', trigger: 'blur'}
          ],
          phone: [
            {required: true,message: '请输入联系方式', trigger: 'blur'}
          ],
          oldPassword: [
            {required: true, message: '请输入旧密码', trigger: 'blur'}
          ],
          pass: [
            {required: true,  validator: validatePass, trigger: 'blur' }
          ],
          checkPass: [
            {required: true, validator: validatePass2, trigger: 'blur' }
          ]
        },
      }
    },
    methods: {
      init(){
        let self = this;
        if(window.sessionStorage.getItem('emName') == undefined){
          staffApi.getLoginPersonInfo().then(
            (response)=>{
              self.emName = response.data.data.realName;
              window.sessionStorage.setItem('emName', self.emName);
              self.personalData.emName = window.sessionStorage.getItem("emName");
            }
          );
        }else{
          self.personalData.emName = window.sessionStorage.getItem("emName");
        };
        this.token = window.sessionStorage.getItem("access_token");
        this.getLoginInfo();
      },
      /**
       * 点击个人信息头像
       */
      personInfo(){
        this.subMenuPerson = true;
      },
      personInfo2(){
        this.subMenuPerson = false;
      },
      /**
       * 点击个人信息头像
       */
      showPass(){
        this.isShowPass =  !this.isShowPass;
      },
      /**
       * 显示个人信息弹框
       */
      showPersonInfo(){
        this.leave = true;
        //清空数据
        this.personalData.newPassword = null;
        this.personalData.oldPassword = null;
        this.personalData.checkPass = null;
      },
      /**
       * 获取登录信息
       */
      getLoginInfo(){
        let self = this;
        staffApi.getLoginPersonInfo().then(
          (response)=>{
          self.personalData.account = response.data.data.phone;
        self.personalData.phone = response.data.data.phone;
//        self.personalData.emName = response.data.data.realName;
        self.personalData.orgName = response.data.data.orgName;
        self.personalData.roleName = response.data.data.roleName;
        self.annexPic.url = response.data.data.annexUrl+'?access_token='+self.token;
        self.annexPic.annexId = response.data.data.annexId;
        self.queryData.oldAnnexId = response.data.data.annexId;
        self.queryData.userId = response.data.data.userId;
      }
      );
      },
      /**
       * 个人资料确认
       */
      confirmPerson(formName){
        let self = this;
        self.queryData.annexId = self.annexPic.annexId;
        self.queryData.newPassword = self.personalData.newPassword;
        self.queryData.oldPassword = self.personalData.oldPassword;
        self.queryData.phone = self.personalData.phone;
        self.queryData.realName = self.personalData.emName;
        if(self.isShowPass==true){
          self.queryData.type = 1;//type:1更改
        }else{
          self.queryData.type = 0;//type:0不更改
          //清空数据
          self.queryData.newPassword = null;
          self.queryData.oldPassword = null;
          self.personalData.checkPass = null;
        }
        if(self.queryData.oldAnnexId==self.queryData.annexId){
          self.queryData.annexId = 0;
        }

        self.$refs[formName].validate((valid) => {
          if (valid) {
            staffApi.editLoginPersonInfo(self.queryData).then(
              (response)=>{
              self.$message({
              message: '修改个人信息成功',
              type: 'success'
            });
            self.leave = false;
            self.isShowPass = false;
          },
            (response)=>{
              self.$message({
                message: '修改个人信息失败',
                type: 'error'
              });
            }
          );
          } else {
            return false;
      }
      });
      },
      logout(){
        window.sessionStorage.clear();
        window.location.href= apiUrl+"/logout";
      },
      /**
       * 个人资料取消
       */
      delPerson(){
        this.leave = false;
        this.subMenuPerson = false;
      },
      handleAvatarSuccess(file){
        this.annexPic.annexId = file.data.annexId;
        this.annexPic.url = file.data.url+'?access_token='+this.token;
      },
    },
    mounted: function () {
      this.init();
    },
  }
</script>

<style>

  .toolSetUp{
    position: absolute;
    right: 20px;
    z-index: 3000;
  }
  .toolSetUp .el-submenu{
    background-color: #8c939d;
    /*box-shadow: 3px 3px 2px rgba(0,0,0,0.4);*/
  }
  .toolSetUp ul li{
    padding-right: 0px;
  }
  .toolSetUp ul li.name{
    width:auto!important;
  }
  .toolSetUp ul li.name:hover{
    background-color: #0cb7c6;

  }
  .toolSetUp .el-submenu li{
    padding-right: 4px;
    background-color: #cccccc;
    cursor: pointer;
    height: 40px;
    line-height: 40px;
  }
  .toolSetUp .set-up-personal{
    /*padding-top: 16px;*/
  }
  .toolSetUp .set-up-personal img{
    width: 38px;
    height: 38px;
  }
  .toolSetUp .mark{
    position: fixed;
    top:0;
    left: 0;
    right:0;
    bottom: 0;
  }
  .toolSetUp .mark-background{
    position: fixed;
    top:0;
    left: 0;
    right:0;
    bottom: 0;
    background: rgba(0,0,0,0.4)
  }
  .toolSetUp .mark .mark-content{
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    transform: translateX(-50%);
    -webkit-box-shadow: 0 1px 3px rgba(0,0,0,0.3);
    box-shadow: 0 1px 3px rgba(0,0,0,0.3);
    background-color: #fff;
    width: 45%;
    margin-top: -300px;
    border-radius: 2px;
    z-index: 10;
    padding-bottom: 20px;
  }

  .toolSetUp .mark .mark-content .mark-content-title{
    padding: 10px 20px!important;
    background-color: #0cb7c6!important;
    margin-bottom: 15px;
  }
  /*.toolSetUp .mark .mark-content .mark-content-title{*/
    /*padding: 10px 20px!important;*/
    /*background-color: #0cb7c6!important;*/
    /*margin-bottom: 15px;*/
  /*}*/
  .toolSetUp .mark .mark-content .el-form{
    margin: 0px 20px;
  }
  .toolSetUp .mark .mark-content .dialog-footer{
    text-align: right;
    padding-right:20px;
  }
  .toolSetUp .panel-title{
    margin-top: 15px;
    padding: 5px 25px;
    font-weight: normal;
    color: #333333;
    font-size: 15px!important;
  }
  .toolSetUp .el-submenu li:hover{
    color: #0cb7c6;
    background-color: rgba(0,0,0,0.5);
  }
  .toolSetUp .el-submenu li.name:hover{
    color: #0cb7c6;
  }
    /*avatar*/
  .toolSetUp .avatar-uploader {
    border-radius: 6px;
    cursor: pointer;
    position: absolute;
    top: 0px !important;
    right:6%;
    z-index: 5;
    height:200px;
  }
  .toolSetUp .avatar-uploader .el-upload:hover {
    border-color: #20a0ff;
  }
  .toolSetUp .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 160px;
    height: 200px;
    line-height: 200px;
    text-align: center;
  }
  .toolSetUp .avatar {
    width: 160px;
    height: 200px;
    display: block;
  }
  .toolSetUp .prompt {
    color: #ff4949;
    font-size: 12px;
    margin-top: 11px;
    margin-left: -28px;
  }
  .toolSetUp span.showPass{
    color:  #20a0ff;
    font-size: 12px;
    cursor: pointer;
    margin-left: 15px;
  }
  .phone.el-form-item{
    margin-bottom: 10px;
  }

  .toolSetUp .imgBox{
    width:100px;
    height:65px;
    position:relative;
    cursor: pointer;
  }

  .imgBox:hover+.el-submenu{
    display:block;
  }

  .toolSetUp .backImage{
    position:absolute;
    left:50%;
    top:50%;
    margin-left:-19px;
    margin-top:-19px;
  }

</style>
